<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
  </head>
  <body>
    <div id="app">
      用户名: <input type="text" v-model.trim="name" @blur="checkname" /> <br />
      密码: <input type="text" v-model.trim="psw" /><br />
      <button @click="reg">注册</button>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/axios/dist/axios.js"></script>
  <script>
    //http://120.76.247.5:2002/user/list?page=1&pagesize=20&search=%7B%7D

    new Vue({
      el: "#app",
      data: {
        name: "",
        psw: "",
        isok: false,
      },

      methods: {
        // 功能：验证用户名是否存在
        async checkname() {
          try {
            let p = await axios.get("http://120.76.247.5:2002/user/checkname", {
              params: { username: this.name },
            });
            console.log(p.data, 999);
            if (p.data.flag) {
              //允许注册
              this.isok = true;
            } else {
              //不允许注册
              this.isok = false;
            }
          } catch (err) {
            console.log(err);
          }
        },

        //功能：注册功能
        async reg() {
          if (this.name && this.psw && this.isok) {
            try {
              let p = await axios.post("http://120.76.247.5:2002/user/reg", {
                username: this.name,
                password: this.psw,
              });
              console.log(p.data, 999);
            } catch (err) {
              console.log(err);
            }
          }
        },
      },

      //发送ajax
      created() {},
    });
  </script>
</html>
